<template>
  <div class="dialog-mask">
    <div class="dialog-box">
      <div class="title-box">
        <div class="title">
          <category-title title="设置" title-sub="Settings"/>
        </div>
        <div class="close-icon" @click="$emit('close')">
          <close-outlined/>
        </div>
      </div>
      <div class="title-group">
        <div v-for="item in titleList" :key="item.type" :class="{'active':Self.type === item.type}"
             class="title" @click="typeChange(item.type)"
        >
          {{ item.title }}
        </div>
<!--        <div v-if="Self.type === 3" class="newAdd">-->
<!--          <div class="btn-item fill-orange" @click="typeChange(4)">-->
<!--            新增-->
<!--          </div>-->
<!--        </div>-->
      </div>
      <div class="log-infos">
        <div v-if="Self.type === 1" class="left set-item">
          <BaseSet/>
        </div>
        <div v-if="Self.type === 2" class="right set-item">
          <IndexSet/>
        </div>
        <div v-if="Self.type === 3" class="set-item">
          <CpuList/>
        </div>
        <div v-if="Self.type === 4" class="set-item">
          <NcList/>
        </div>
        <div v-if="Self.type === 5" class="set-item">
          <cpList/>
        </div>
        <div v-if="Self.type === 6" class="set-item">
          <CpkjList/>
        </div>
<!--        <div v-if="Self.type === 2" class="right set-item">-->
<!--          <WarnSet :column="timeSet"/>-->
<!--        </div>-->
<!--        <div v-if="Self.type === 3" class="account" style="position:relative;flex: 1">-->
<!--          <CMytTable style="position: absolute;width: 100%;"/>-->
<!--        </div>-->
<!--        <div v-if="Self.type === 4" class="form">-->
<!--          <SimpleForm @close="formClose" @submit="accountSubmit"/>-->
<!--        </div>-->
<!--        <div v-if="Self.type === 5" class="camera">-->
<!--          <CameraSet/>-->
<!--        </div>-->
<!--        <div v-if="Self.type === 6" class="car">-->
<!--          <CarSet :column="carCol"/>-->
<!--        </div>-->
      </div>
    </div>
  </div>
</template>

<script setup>
import {CloseOutlined} from "@ant-design/icons-vue";
import CategoryTitle from "../category-title/index.vue";
import {provide, ref} from "vue";
import {onMounted} from "@vue/runtime-core";
import {
  AccountAdd,
  AccountEdit, CarGet,
  ClockingIn,
  ClockingInEdit,
  GjEdit,
  GjList,
  VideoEdit,
  VideoList
} from "@/common/customs/setting";
import {
  addTableConfig, carCol,
  timeSet,
  titleList
} from "@/components/customs/dialog-set/data";
import {reactive} from "@vue/reactivity";
import CMytTable from "@/components/my-table/index.vue";
import SimpleForm from "@/components/customs/simple-form/index.vue";
import CameraSet from "@/components/customs/camera-set";
import CarSet from "./component/car-set/index.vue";
import BaseSet from "./component/base-set/index.vue";
import IndexSet from "./component/index-set/index.vue"
import CpuList from "./component/cpu-list-set/index.vue"
import NcList from "./component/nc-list-set/index.vue"
import CpList from "./component/cp-list-set/index.vue"
import CpkjList from "./component/cpkj-list-set/index.vue"

const type = ref(1);
const Self = reactive({
  type: 1,
  typeChange: (index) => {
    Self.type = index;
  }
});
const timeData = ref({});
const carData = ref({});
const clockingInData = ref({});
const MyTable = reactive({
  onSearch: null,
});
const MyForm = reactive({
  formDatas: {},
  datas: [
    {
      type: "input",
      name: "username",
      title: "账号",
    },
    {
      type: "input",
      name: "name",
      title: "姓名",
    },
    {
      type: "input",
      name: "mobile",
      title: "手机号",
    },
    {
      type: "input",
      inputType: "password",
      name: "password",
      title: "密码",
    },
    {
      type: "input",
      inputType: "password",
      name: "rePassword",
      title: "确认密码",
    },
    {
      type: "select",
      name: "roles_id",
      title: "权限",
      items: [
        {
          name: "超级管理员",
          id: 0
        },
        {
          name: "值班老师",
          id: 1
        },
      ]
    },
  ]
});
const myVideo = ref([]);

const getVideo = async () => {
  const api = new VideoList();
  api.params({
    page: 1,
    pageSize: 4,
  });
  await api.send();
  const {data} = await api.getDatas();
  myVideo.value = data.data;
};

// eslint-disable-next-line no-undef
const emit = defineEmits(["submit", "close"]);

const typeChange = async (index) => {
  MyForm.formDatas = {};
  Self.type = index;
};
const formClose = () => {
  typeChange(3);
};
const accountSubmit = async () => {
  if ("id" in MyForm.formDatas) {
    console.log(MyForm.formDatas, "----------------");
    try {
      const api = new AccountEdit().query(["adminuser-edit", MyForm.formDatas.id]);
      api.data({
        username: MyForm.formDatas.username,
        password: MyForm.formDatas.password,
        roles_id: MyForm.formDatas.roles_id,
        mobile: MyForm.formDatas.mobile,
        name: MyForm.formDatas.name,
      }).hint("修改");
      await api.send();
      const {data, code} = await api.getDatas();
      if (code === 0) {
        MyForm.formDatas = {};
        typeChange(3);
      }
    } catch (e) {
      console.log(e);
    }
  } else {
    //新增
    try {
      const api = new AccountAdd()
          .params({
            ...MyForm.formDatas,
            rePassword: undefined,
          })
          .hint("提交");
      await api.send();
      const {data, code} = await api.getDatas();
      if (code === 0) {
        MyForm.formDatas = {};
        typeChange(3);
      }
    } catch (e) {
      console.log(e);
    }
  }

};
const submit = async () => {
  if (Self.type === 1) {
    myVideo.value.map(async item => {
      const api = new VideoEdit();
      api.query(["Xyhc-edit", item.id]);
      let data = {
        name: item.name,
      };
      if ("newVideo" in item) {
        data.sp = item.newVideo;
      }
      if ("newImgUrl" in item) {
        data.img = item.newImgUrl;
      }
      api.data(data);
      await api.send();
      const res = await api.getDatas();
    });
  }
  if (Self.type === 2) {
    const api = new GjEdit();
    api.query(["Gjsz-edit", 1]);
    let gjData = {};
    let gjkey = ["ttsj","zpslls", "slsj", "swsj", "is_tt", "is_sl", "ttgz", "slgz", "swgz", "is_sw", "ycgz", "is_yc"];
    gjkey.forEach(item => {
      gjData[item] = timeData.value[item];
    });
    gjData.ttks = timeData.value.tt[0];
    gjData.ttjs = timeData.value.tt[1];
    api.data(gjData);
    await api.send();
    const {data} = await api.getDatas();
    const res = new ClockingInEdit();
    res.data({
      ygks: timeData.value.yg[0],
      ygjs: timeData.value.yg[1],
      latereturnks: timeData.value.wg[0],
      latereturnjs: timeData.value.wg[1],
      latereturngz: timeData.value.latereturngz,
      is_wg: timeData.value.is_wg,
      is_lat: timeData.value.is_wg
    });
    console.log(res);
    await res.send();
  }
  if (Self.type === 6){
    const api = new CarSetApi()
    let {zcw,xzz} = carData.value
    api.data({zcw, xzz})
    await api.send()
    const res = await api.getDatas()
  }
  emit("close");
};
const getTime = async () => {
  const api = new GjList();
  api.params({
    page: 1,
    page_size: 15
  });
  await api.send();
  const {data} = await api.getDatas();
  timeSet.value = data.data[0];
  timeSet.value.tt = [data.data[0].ttks,data.data[0].ttjs]
  const res = new ClockingIn();
  res.params({
    page: 1,
    page_size: 15
  });
  await res.send();
  const {data: r} = await res.getDatas();
  // timePickerSet.value = r;
  timeData.value = {
    ...r,
    ...data.data[0],
    yg: [r.ygks, r.ygjs],
    wg: [r.latereturnks, r.latereturnjs],
    weig: [r.latereturnjs],
  };
  console.log(timeData.value);
};
const getCarData =async () => {
  const api = new CarGet()
  await api.send()
  const {data} =await api.getDatas()
  carData.value = data.data[0]
};
onMounted(() => {
  // getVideo();
  // getTime();
  // getCarData();
});

defineExpose({
  typeChange
});

provide("MyTable", MyTable);
provide("MyForm", MyForm);
provide("clockingInData", clockingInData);
provide("timeData", timeData);
provide("carData", carData);
addTableConfig(MyTable, MyForm, Self);

</script>

<style lang="less" scoped>
@import "./index.less";
</style>
